<!DOCTYPE >
<html>
    <head>
        <title>样式标签</title>
        <meta charset='utf-8'>
        <link rel='stylesheet' type='text/css' href='../css/c1.css'>
    </head>
    <body>
    <img src='../img/map.jpg' border='0' usemap='#planetmap' width='500' height='300' />
    <map name='planetmap' id='planetmap'>
        <area shape='circle' coords='180,139,20' href ='b.html' />
        <area shape='poly' coords="129,161,10,100,200,150,350,200,129,161" href =b.html />
        <area shape="rect" coords='0,0,50,50' href ='b.html' />
    </map>

    <div class= 'title'>map热点</div>
    <div class= 'code'>
    <pre>
        &lt;img src='img/' border='0' usemap='#planetmap' /&gt;
        &lt;map name='planetmap' id='planetmap'&gt;
            &lt;area shape='circle' coords='180,139,14' href =''  /&gt;
            &lt;area shape='poly' coords='129,161,10,100,200,150,350,200,129,161' href =''  /&gt;
            &lt;area shape='rect' coords='0,0,110,260' href ='' /&gt;
        &lt;/map&gt;
        </pre></div>
    <div class= 'title'>说明</div>
    <div style="text-indent:20px"> usermap 属性：热点属性 #名称（热点和图片想关联）</div>
    <ol><li> href  跳转的页面</li>
        <li>shape   热点形状
        <ul>
            <li>rect 矩形</li>
            <li>circle  圆形</li>
            <li>poly  多边形</li>
        </ul></li>
        <li>coords  热点坐标
        <ul><li>rect 坐标起点[x,y]0.0   坐标终点 [x,y]100.100</li>
            <li>circle 圆心坐标[x,y，r] r为半径</li>
            <li>poly [x,y,x,y,x,y,] </li>
        </ul></li>
    </ol>
    <hr/>
        <div class='title'>属于行集元素</div>
    <div class='code'>
        <table>
            <tr>
                <td width = '20%' >名称</td>
                <td width = '40%'>代码示例</td>
                <td width = '40%'>代码效果</td>
            </tr>
            <tr>
                <td>b加粗</td>
                <td> <pre>b&gt;今天&lt;/b&gt;</pre></td>
                <td><b>今天</b></td>
            </tr>
            <tr>
                <td>i斜体</td>
                <td><pre>&lt;i&gt;今天&lt;/i&gt;&lt;/pre>&lt;/td>
                <td><i>今天</i></td>
            </tr>
            <tr>
                <td>u下划线</td>
                <td><pre>&lt;u&gt;今天&lt;/u&gt;</pre></td>
                <td><u>今天</u></td>
            </tr>
            <tr>
                <td>del删除线</td>
                <td><pre>&lt;del&gt;今天&lt;/del&gt;</pre></td>
                <td><del>今天</del></td>
            </tr>
            <tr>
                <td>em类似斜体</td>
                <td><pre>&lt;em&gt;今天&lt;/em&gt;</pre></td>
                <td><em>今天</em></td>
            </tr>
            <tr>
                <td>strong类似加重</td>
                <td><pre>&lt;strong&gt;今天&lt;/strong&gt;</pre></td>
                <td><strong>今天</strong></td>
            </tr>
            <tr>
                <td>sub下标</td>
                <td><pre>今&lt;sub&gt;天&lt;/svb&gt;</pre></td>
                <td>今<sub>天</sub></td>
            </tr>
            <tr>
                <td>sup上标</td>
                <td><pre>今&lt;sup&gt;天&lt;/sup&gt;</pre></td>
                <td>今<sup>天</sup></td>
            </tr>
            <tr>
                <td>big变大</td>
                <td><pre>&lt;big&gt;今天&lt;/big&gt;</pre></td>
                <td><big>今天</big></td>
            </tr>
            <tr>
                <td>small变小</td>
                <td><pre>&lt;small&gt;今天&lt;/small&gt;</pre></td>
                <td><small>今天</small></td>
            </tr>
            <tr>
                <td>center居中</td>
                <td><pre>&lt;center&gt;今天&lt;/center&gt;</pre></td>
                <td><center>今天</center></td>
            </tr>
        </table></div>
        <hr/>
        <div class='title'>分组标签</div>
    <div>示例</div>
    <div class= 'code'>
        <pre>
        &lt;fieldset>
            &lt;legend&gt;标题&lt;/legend&gt;
            &lt;p>内容&lt;/p&gt;
            &lt;/fieldset&gt;</pre>
    </div>
        <div >效果</div>
    <div class='result'>
    <fieldset>
        <legend>标题</legend>
        <p>内容</p>
    </fieldset></div>
    <hr/>
    <div class='title'>组合表格标签</div>
        dl一级组合标签<br/>
        dt二级组合标签<br/>
        dd三级组合标签<br/>
<div >代码示例</div>
    <div class='code'>
        <pre>
        &lt;dl&gt;亚洲
            &lt;dt&gt;中国&lt;/dt&gt;
            &lt;dd&gt;上海&lt;/dd&gt;
            &lt;dd&gt;长沙&lt;/dd&gt;
             &lt;dt&gt;中国&lt;/dt&gt;
            &lt;dd&gt;上海&lt;/dd&gt;
            &lt;dd&gt;长沙&lt;/dd&gt;
        &lt;/dl&gt;
      </pre>
    </div><br/>
        <div >效果</div>
    <div class= 'result'>
        <dl>亚洲
            <dt>中国</dt>
            <dd>上海</dd>
            <dd>长沙</dd>
            <dt>中国</dt>
            <dd>上海</dd>
            <dd>长沙</dd>
        </dl></div>
    </body>
</html>